<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1 ref="hello">{{ value }}</h1>
    <button @click="get" type="danger">点击</button>
</div>
</body>
<script src="../js/http_cdn.bootcdn.net_ajax_libs_vue_2.6.6_vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            value: 'Hello World ~'
        },
        methods: {
            get() {
                this.value = '你好啊';
                console.log(this.$refs['hello'].innerText);
                // 这时候hello的这个dom还没更新完成,所以打印出来的还是HelloWord
                console.log(this.$refs['hello'].innerText);
                // this.$nextTick() 是等hello这个dom更新完成之后才执行
                this.$nextTick(() => {
                    console.log(this.$refs['hello'].innerText);
                });
            }
        },
    })
</script>
</html>
